<template>
	<div class="card-fill layout-padding">
		<el-card shadow="hover" class="layout-padding-auto" v-loading="loading">
			<el-tabs v-model="activeTab">
				<el-tab-pane label="基本信息" name="main">
					<el-form ref="formRef" :model="state.vmModel" label-width="120px">
						<el-row>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_GroupCode_FormItem" prop="Entity.GroupCode" :label="$t('message._admin.group.vm.GroupCode')">
									<el-input v-model="state.vmModel.Entity.GroupCode" clearable disabled></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_GroupName_FormItem" prop="Entity.GroupName" :label="$t('message._admin.group.vm.GroupName')">
									<el-input v-model="state.vmModel.Entity.GroupName" clearable disabled></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_ParentId_FormItem" prop="Entity.ParentId" :label="$t('message._admin.group.vm.ParentId')">
									<el-cascader
										:options="state.allGroups"
										:props="{ checkStrictly: true, emitPath: false, multiple: true, label: 'Text', value: 'Value', children: 'Children' }"
										clearable
										disabled
										filterable
										class="w100"
										v-model="state.vmModel.Entity.ParentId"
									/>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_FullName_FormItem" prop="Entity.FullName" :label="$t('message._admin.group.vm.FullName')">
									<el-input v-model="state.vmModel.Entity.FullName" clearable disabled></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_IsCompany_FormItem" prop="Entity.IsCompany" :label="$t('message._admin.group.vm.IsCompany')">
									<el-switch v-model="state.vmModel.Entity.IsCompany" disabled></el-switch>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_IsDisabled_FormItem" prop="Entity.IsDisabled" :label="$t('message._admin.group.vm.IsDisabled')">
									<el-switch v-model="state.vmModel.Entity.IsDisabled" disabled></el-switch>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_IsVirtual_FormItem" prop="Entity.IsVirtual" :label="$t('message._admin.group.vm.IsVirtual')">
									<el-switch v-model="state.vmModel.Entity.IsVirtual" disabled></el-switch>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_IsInheritParent_FormItem" prop="Entity.IsInheritParent">
									<template #label>
										<WtmLabelTooltip label="是否继承父级" tooltip="是否继承父级查询限制" />
									</template>
									<el-switch v-model="state.vmModel.Entity.IsInheritParent" disabled></el-switch>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :lg="12" class="mb20">
								<el-form-item ref="Entity_Order_FormItem" prop="Entity.Order" label="排序">
									<el-input-number v-model="state.vmModel.Entity.Order" :step="0.01" class="w100" disabled></el-input-number>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :xs="24" :lg="24" class="mb20">
								<el-form-item ref="Entity_GroupRemark_FormItem" prop="Entity.GroupRemark" :label="$t('message._admin.group.vm.GroupRemark')">
									<el-input v-model="state.vmModel.Entity.GroupRemark" clearable disabled></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :xs="24" :lg="24" class="mb20">
								<el-form-item label="组织">
									<el-transfer
										v-model="state.vmModel.SelectedOrganizationIds"
										:titles="['可选组织', '已选组织']"
										:data="state.organizationList"
										:props="{ key: 'Value', label: 'Text', disabled: 'Disabled' }"
									/>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="岗位信息" name="position">
					<SysJobPosition
						:key="state.vmModel.Entity.ID || ''"
						:search-bar="false"
						:toolbar="true"
						:is-disabled="true"
						:GroupId="state.vmModel.Entity.ID"
					/>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message._system.common.vm.detail;false">
import { reactive, ref, getCurrentInstance, onMounted, watch, nextTick } from 'vue';
import frameworkgroupApi from '/@/api/frameworkgroup';
import other from '/@/utils/other';
import { useRouter } from 'vue-router';
import { commonApi } from '/@/api/common';

//引入岗位信息
import SysJobPosition from '/@/views/_admin/sysjobposition/index.vue';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh', 'closeDialog', 'updateHeaderButtons']);
const loading = ref(false);
// 定义变量内容
const activeTab = ref('main');
const formRef = ref();
const state = reactive({
	vmModel: {
		Entity: {
			ID: null,
			GroupCode: null,
			GroupName: null,
			ParentId: null,
			Manager: null,
			GroupRemark: null,
			IsCompany: false,
			IsDisabled: false,
			FullName: null,
			IsVirtual: false,
			IsInheritParent: true, // 默认继承父级查询限制
			Level: 0,
			Order: 0,
		},
		SelectedOrganizationIds: [] as string[],
	},
	allGroups: [] as any[],
	organizationList: [] as any[],
});
const ci = getCurrentInstance() as any;

// 加载组织数据的公共方法
const loadOrganizations = async (parentId: string | number | null) => {
	let res;
	if (parentId && state.vmModel.Entity.IsInheritParent) {
		// 有父级且开启继承父级查询限制，带groupId参数
		res = await commonApi().getOrganizations(String(parentId));
	} else {
		// 无父级或不继承父级查询限制，不带参数
		res = await commonApi().getOrganizations();
	}
	state.organizationList = (Array.isArray(res) ? res : []).map((item) => ({ ...item, Disabled: true }));
	// 详情页只展示，SelectedOrganizationIds应由接口数据回填
};

// 打开弹窗
onMounted(() => {
	if (ci.attrs['wtmdata']) {
		state.vmModel.Entity.ID = ci.attrs['wtmdata'].ID;
	} else if (useRouter().currentRoute.value.query.id) {
		state.vmModel.Entity.ID = useRouter().currentRoute.value.query.id as any;
	}
	loading.value = true;
	frameworkgroupApi()
		.get(state.vmModel.Entity.ID ?? '')
		.then((data: any) => other.setValue(state.vmModel, data))
		.finally(() => {
			loading.value = false;
		});
	other.getSelectList('/api/common/GetGroups?auth=false', [], false).then((x) => {
		state.allGroups = x;
	});
	nextTick(() => {
		setupHeaderButtons();
	});
});

watch(
	() => state.vmModel.Entity.ParentId,
	async (newParentId) => {
		await loadOrganizations(newParentId);
	},
	{ immediate: true }
);

// 监听继承父级查询限制开关变化
watch(
	() => state.vmModel.Entity.IsInheritParent,
	async (newValue) => {
		await loadOrganizations(state.vmModel.Entity.ParentId);
	}
);

// 关闭弹窗
const closeDialog = () => {
	emit('closeDialog');
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 暴露变量
defineExpose({});
// 设置对话框头部按钮
const setupHeaderButtons = () => {
	const headerButtons = [
		{
			text: ci.proxy.$t('message._system.common.vm.cancel'),
			type: 'default',
			onClick: onCancel,
			visible: true,
		},
	];
	emit('updateHeaderButtons', headerButtons);
};
</script>
